import { Col, Form, InputNumber, Row, Slider } from 'antd';
import classNames from 'classnames';
import React, { useRef, useState } from 'react';

import { LayerInfoFE } from '@/pages/TemplateEditor/interface';

import { LayerTypeBE } from '../../../../../../../../../constant';
import { floatToInt } from '../../../../../../../../../utils';
import formStyles from '../../index.module.less';
import ColorPicker from '../ColorPicker';
import styles from './index.module.less';

interface Props {
  layer: LayerInfoFE;
  hasFill?: boolean;
  hasBorder?: boolean;
}

const ColorConfigs = ({
  layer,
  hasBorder = true,
  hasFill = true
}: Props): JSX.Element => {
  const isTextLayer = layer.data.type === LayerTypeBE.Text;

  return (
    <Row gutter={[24, 12]}>
      {hasFill && (
        <>
          <Col span={12}>
            <Form.Item
              className={classNames('w-full', formStyles['form-item'])}
              label="Fill Color"
              name={
                isTextLayer
                  ? ['data', 'text', 'fill']
                  : ['data', 'graphics', 'fillColor']
              }
            >
              <ColorPicker />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="Fill Opacity"
              name={
                isTextLayer
                  ? ['data', 'text', 'opacity']
                  : ['data', 'graphics', 'transparency']
              }
              className={formStyles['form-item']}
            >
              <OpacitySlider />
            </Form.Item>
          </Col>
        </>
      )}
      {hasBorder && (
        <>
          <Col span={12}>
            <Form.Item
              className={classNames('w-full', formStyles['form-item'])}
              label="Border Color"
              name={['data', 'graphics', 'borderColor']}
            >
              <ColorPicker />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="Border Opacity"
              name={['data', 'graphics', 'borderOpacity']}
              className={formStyles['form-item']}
            >
              <OpacitySlider />
            </Form.Item>
          </Col>
        </>
      )}
    </Row>
  );
};

const OpacitySlider = ({
  value: opacity = 1,
  onChange
}: {
  value?: number;
  onChange?: (value: number) => void;
}): JSX.Element => {
  const [isEdit, setIsEdit] = useState(false);
  const inputRef = useRef<HTMLInputElement>();

  const value = floatToInt(opacity * 100);

  const handleChange = (newValue: number): void => {
    onChange(newValue / 100);
  };

  return (
    <div className={styles['color-line']}>
      <Slider value={value} onChange={handleChange} />
      {isEdit ? (
        <InputNumber
          ref={inputRef}
          style={{ height: 32, width: 46 }}
          min={0}
          max={100}
          onChange={handleChange}
          value={value}
          onBlur={(): void => {
            setIsEdit(false);
          }}
        />
      ) : (
        <span
          onDoubleClick={(): void => {
            setIsEdit(true);
            setTimeout(() => {
              inputRef.current.focus();
            });
          }}
        >
          {value}%
        </span>
      )}
    </div>
  );
};

export default ColorConfigs;
